<template>
  <div class="status-wrap">
    <div class="sub-title-wrap">
      <div class="item":underline="false" >
        <img src="@/assets/images/workbench/device.png">
        <span class="name">设备总数</span>
        <span class="total">{{totalData.totalCnt}}</span>
      </div>

      <div class="item">
        <div></div>
        <span>运行</span>
        <span class="total">{{totalData.onCnt}}</span>
      </div>
      <div class="item">
        <div class="wran"></div>
        <span>停机</span>
        <span class="total">{{totalData.offCnt}}</span>
      </div>
      <div class="item">
        <div class="unKnown"></div>
        <span>离线</span>
        <span class="total">{{totalData.unknowCnt}}</span>
      </div>
    </div>

    <div v-loading="loading">
      <template v-if="carouselData && carouselData.length">
        <el-carousel :autoplay="false" indicator-position="none" :arrow="carouselData.length > 1 ? 'always' : 'never'" height="166px">
          <el-carousel-item  v-for="ele in carouselData" :key="ele.key">
            <ul>
              <li v-for="item in ele.data" :key="item.equipId">
                <div v-if='item.runStatus == "ON"'></div>
                <div class="wran" v-if='item.runStatus == "OFF"'></div>
                <div class="unKnown" v-if='item.runStatus == "UNKNOW"'></div>
                <span>{{item.equipName}}</span>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </template>
      <div class="error-tip" v-else>
        暂无数据
      </div>
    </div>
  </div>

</template>
<script>
  import {getEquipmentRunStatus} from "@/api/workbench/index";
export default {
  props:{
    queryData:{
      type:String,
      default:""
    },
    queryType:{
      type:String,
      default:""
    }
  },

  data() {
    return {
      tableData:[],
      totalData:{},
      loading: false,
      carouselData:[],
      queryParams:"",
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      refreshTimer:null
    };
  },

  // created(){
  //   this.getList()
  // },
  methods:{
    setRefreshTimer(){
      if (this.refreshTimer) {
        clearTimeout(this.refreshTimer);
      }
      this.refreshTimer = setTimeout(() => {
        this.getList();
        this.setRefreshTimer();
      },60000)
    },

    getList(){
      this.loading = true;
      let query = {}
      if(this.queryType == "line"){
        query.lineIds = this.queryParams;
      }
      else if(this.queryType == "station"){
        query.workStationId = this.queryParams;
      }
      getEquipmentRunStatus(query)
      .then((res) => {
        this.tableData = res?.data?.equipmentRunStatuss || [];
        this.totalData = res?.data || {};
        this.pager.total = res?.total || 0;
        if(this.tableData?.length){
          let groupedArray = this.group(this.tableData, 25);
          this.carouselData = groupedArray.map((ele,index) => {
            return {
              data:ele,
              key:index
            }
          })
        }else{
          this.carouselData = []
        }
        this.loading = false;
      })
      .catch(() => {
        this.tableData = [];
        this.pager.total = 0;
        this.loading = false;
      });
    },
    group(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while(index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    }
  },

  watch:{
    // lineIds(newVal, oldVal){
    //   console.log(newVal,"newValnewValnewVal")
    //   if(newVal){
    //     this.queryParams.lineIds = newVal;
    //     this.getList()
    //   }
    // }
    queryData:{
      handler(newVal){
        if(newVal){
          this.queryParams = newVal;
        }
        this.getList()
        // 清除轮询
        if (this.refreshTimer) {
          clearTimeout(this.refreshTimer);
        }
        this.setRefreshTimer()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },
  destroyed(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  }
};
</script>
<style lang="scss" scoped>
  .status-wrap{
    .sub-title-wrap{
      display:flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom:32px;
      .item{
        display:flex;
        align-items: center;
        margin-left:20px;
        color: #606266;
        img{
          width: 18px;
          height: 18px;
        }
        div{
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #34855C;
        }
        .wran{
          background-color: #F54E1E;
        }
        .unKnown{
         background-color:rgba(153,153,153,0.5)
        }
        span{
          margin-left: 10px;
        }
        .total{
          margin-top:2px
        }
      }
    }
    ul{
      display:flex;
      align-items: center;
      flex-wrap:wrap;
      padding:0;
      margin:0;
      li{
        display: flex;
        align-items: center;
        margin-bottom:16px;
        // margin-right:40px;
        width:20%;
        text-align:left;
        div{
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #34855C;
        }
        .wran{
          background-color: #F54E1E;
        }
        .unKnown{
         background-color:rgba(153,153,153,0.5)
        }
        span{
          margin-left: 10px;
          font-size:14px;
          color: #606266;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .error-tip{
    width: 100%;
    line-height: 60px;
    font-size:14px;
    text-align: center;
    color:#909399;
  }
</style>
